<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <th:block th:replace="componet::reference"></th:block>
</head>
<body>
<div class="layui-row" style="margin-top: 50px">
    <div style="text-align: center;">
        <div class="layui-inline">
            <form class="layui-form layui-form-pane" lay-filter="myForm">

                <div class="layui-form-item">
                    <label class="layui-form-label">登录账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userCode" required lay-verify="required|userCode" placeholder="请输入输入框内容"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userName" required lay-verify="required" placeholder="请输入输入框内容"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="userPassword" required lay-verify="pass" value="123456" placeholder="请输入密码框内容"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>密码默认为123456</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-inline">
                        <select name="roleId" lay-verify="required" lay-search>
                            <option value=""></option>
                            <option th:each="role:${roles}" th:value="${role.id}">[[${role.roleName}]]</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">入职日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="entryDate" required lay-verify="required" id="entryDate"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">离职日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dimissionDate" id="dimissionDate"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        使用状态</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="userStatus" value="1" title="正常" class="layui-input" checked>
                        <input type="radio" name="userStatus" value="0" title="冻结" class="layui-input">
                    </div>
                </div>

                <div class="layui-from-item">
                    <button class="layui-btn" lay-filter="save" lay-submit="">确认</button>
                    <button class="layui-btn" id="fail">返回</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'layer', 'laydate'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer,
                laydate = layui.laydate;


            //执行一个laydate实例
            laydate.render({
                elem: '#entryDate' //指定元素
                , value: new Date()
                , trigger: 'click'
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#dimissionDate' //指定元素
                , trigger: 'click'
            });



            //监听返回
            $("#fail").on('click', function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                console.log(window.name);
                // 关闭当前frame
                parent.layer.close(index);


                xadmin.close();
            });

            form.verify({
                userCode: function(value, item){ //value：表单的值、item：表单的DOM对象
                    var flag = false;
                    $.ajax({
                            url : `/user/userCodeExist/${value}`,
                            method : "post",
                            async : false,  //不需要异步因为要获取值后返回
                            success : function (data) {
                                flag = data;
                            }
                    });
                    if (flag)
                        return "用户名已经存在";
                }

                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                ,pass: [
                    /^[\S]{6,20}$/
                    ,'密码必须6到12位，且不能出现空格'
                ]
            });



            //监听提交
            form.on('submit(save)',
                function (data) {

                    //发异步，把数据提交给java
                    $.post("/user/addOrUpdate", data.field, function (data) {
                        if (data) {
                            parent.layer.msg("添加成功", {icon: 1});
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            // 关闭当前frame
                            parent.layer.close(index);
                            //重新加载父级页面的表格
                            parent.layui.table.reload('test');
                            xadmin.close();
                        } else {
                            layer.msg("添加失败", {icon: 2});
                        }
                    });

                    return false;
                });

        });

</script>
</body>
</html>